import React from "react";
import { NavBar, Icon, Toast, Button } from 'antd-mobile';
import './style.less'
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { observer, inject } from 'mobx-react'


const QRC = require('qrcode.react');

@inject("chatbot")
@observer
class QRCode extends React.Component {


  static defaultProps = {
    //设置props默认值方法

  };

  state = {

  };

  componentDidMount() {

  }

  render() {
    const { } = this.state
    const { location, history, chatbot } = this.props
    // const { pathname } = location

    const url = `${window.location.host}/home?chatbotInfo=${JSON.stringify(chatbot.info)}`

    return (
      <div className="qr-code">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            history.go(-1)
          }}
        >{'在手机上使用'}</NavBar>
        <div className="info">
          <div className="code">
            <QRC value={url} />
          </div>
          <div className="other">
            <div>请使用手机浏览器扫码以打开页面</div>
            <div className="copy">
              <CopyToClipboard text={url} onCopy={() => {
                Toast.info("复制成功", 1, null, false)
              }}>
                <Button type="primary" inline size="small">复制二维码链接</Button>
              </CopyToClipboard>
            </div>
          </div>
        </div>

      </div>
    );
  }
}

export default QRCode
